<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>
			<input type="checkbox" class="sall" name="" id="" value="" />全选
			<input type="checkbox" class="fs" name="" id="" value="" />反选
		</p>
		<p>
			<input type="checkbox" class="hb"  name="" id="" value="" />篮球
			<input type="checkbox" class="hb"  name="" id="" value="" />排球
			<input type="checkbox" class="hb"  name="" id="" value="" />足球
	
		</p>
		
		

	</body>
	<script type="text/javascript">
		var sall = document.querySelector(".sall");
		var hb = document.querySelectorAll(".hb");
		var fs = document.querySelector(".fs");
		var num = 0;
		for (var i=0;i<hb.length;i++) {
			hb[i].onclick = function(){
				num++;
				if(num==hb.length){
					sall.checked = true;
				}else{
					sall.checked = false;
				}
			}
		}
		
		fs.onclick = function(){
			for (var i=0;i<hb.length;i++) {
				
				hb[i].checked = !hb[i].checked;
				
			}
		}
		
		
	</script>
</html>
